<template>
  <div class="my">
    <!-- 背景框 -->
    <div class="img-box">
      <img :src="userInfo.userBg" alt />
    </div>
    <!-- 资料栏 -->
    <div class="Data">
      <div class="top">
        <!-- 个人头像框 -->
        <img class="user-img" :src="userInfo.userImg" alt />
        <div>
          <div class="nickName">{{userInfo.nickName}}</div>
          <div class="desc">{{userInfo.desc}}</div>
        </div>
      </div>
      <div class="bottom">
        <van-cell title="个人资料" is-link to="/Personal"   />
        <van-cell title="我的订单" is-link to="/MyOrder" />
        <van-cell title="我的收藏" is-link to="/MyCollection" />
        <van-cell title="地址管理" is-link to="/AddressManage" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "My",
  data() {
    return {
      token: "",
      userInfo: [""]
    };
  },
  created() {
    this.token = localStorage.getItem("tk__");
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      if(this.token == null){
        this.$router.push({name:"Login"});
        return;
        }
      this.axios({
        //请求类型
        method: "GET",
        //请求地址
        url: "/findMy",
        params: {
          appkey: this.appkey,
          tokenString: this.token
        }
      }).then(res => {
        console.log(res.data.result[0]);
        this.userInfo = res.data.result[0];
      });
    },
    onClick(event,title){
      console.log(title,event);
    }
  }
};
</script>

<style lang="less" scoped>
.my {
  width: 100%;
  height: 620px;
  background: #f0f0f0;
  /* position: relative; */
}
.img-box {
  width: 100%;
  height: 180px;
}
.img-box img {
  width: 100%;
  height: 100%;
}
.Data {
  width: 350px;
  height: 350px;
  background: white;
  opacity: 0.5;
  /* position: absolute; */
  margin: 0 auto;
  margin-top: -50px;
  z-index: 1;
  border-radius: 10px;
  padding: 10px;
}
.top {
  display: flex;
  font-size: 15px;
  margin-bottom: 50px;
}
.user-img {
  width: 70px;
  height: 70px;
  border-radius: 100%;
  margin-right: 20px;
}
.nickName {
  margin-bottom: 10px;
  color: #0c34ba;
  font-weight: bolder;
}
/deep/.van-cell {
  padding-left: 0px;
}
</style>